<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM相关</title>
</head>
<body>
<div><span>本页面介绍DOM相关内容</span></div>
<div><span>Document整个文档对象</span></div>
<div><span>Element元素对象</span></div>
<div><span>Attribute属性对象</span></div>
<div><span>Text文本对象</span></div>
<div><span>Comment注释对象</span></div>
<br><hr>
<div><span>可以通过Document对象获取element对象,下面介绍4中获取元素方法</span></div>
<div><span>getElementById():根据id值获取,返回Element对象数组</span></div>
<div><span>getElementsByTagName():根据标签名获取,返回Element对象数组</span></div>
<div><span>getElementsByName():根据name属性值获取,返回Element对象数组</span></div>
<div><span>getElementsByClassName():根据class属性值获取,返回Element对象数组</span></div>
<br><hr>
<div><span>下面介绍事件绑定的两种方法</span></div>
<div><span>1.通过html标签中的事件属性进行绑定,例如</span></div>
<div><input type="button" value="按钮1" onclick="on()"></div>
<div><span>2.通过DOM元素属性绑定,例如</span></div>
<div><input type="button" value="按钮2" id = "btn"></div>
<div><span>除了鼠标点击onclick,
    还有onblur失去焦点,onfocus获得焦点,
    onload完成加载,onsubmit表单提交时,
    onmouseover鼠标来到,onmouseout鼠标移开</span></div>

<script>
    function on(){
        alert("这就是把标签的事件属性绑定到一个输出功能上");
    }
    document.getElementById("btn").onclick = function (){
        alert("这种写法底层还是会写标签的onclick属性,但是只需要在js中写,动静分离");
    }
</script>
</body>
</html>